<template>
  <s-page custom-class="Styles-Page">
    <c-demo-block title="文字省略">
      <!-- 最多显示一行 -->
      <view class="ellipsis-box s-ellipsis">{{ msg1 }}</view>
      <!-- 最多显示两行 -->
      <view class="ellipsis-box s-multi-ellipsis--l2">{{ msg2 }}</view>
    </c-demo-block>

    <c-demo-block title="0.5px 边框">
      <view class="s-hairline--surround" style="height: 200rpx; background: #fff"></view>
    </c-demo-block>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    msg1: '这是一段最多显示一行的文字，多余的内容会被省略适当考虑减少浪费就受到了卡积分深刻的计算定积分随时随地就是独立开发就是哆啦开发就是的空间',
    msg2: '这是一段最多显示二行的文字，多余的内容会被省略适当考虑减少浪费就受到了卡积分深刻的计算定积分随时随地就是独立开发就是哆啦开发就是的空间',
  }),
  computed: {},
  methods: {},
  onLoad() { },
};
</script>

<style lang="scss">
.Styles-Page {
  padding: 0 $padding-md;
  .ellipsis-box:nth-child(n + 2) {
    margin-top: 30rpx;
  }
}
</style>
